<template>
   <div v-loading="loading" class="Main">
      <div class="w1440">
         <div class="flex_fsw">
            <div class="MainLeft w72">
               <div class="ForumImg mb15">
                  <el-carousel :interval="4000" arrow="always">
                     <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
                        <div class="item carousel-image">
                           <div class="imgbox" :title="item.title">
                                <router-link :to="item.url"><img :src="item.img"></router-link>
                           </div>
                        </div>
                     </el-carousel-item>
                  </el-carousel>
               </div>
               <div class="ForumBox bgwhite slideTxt">
                 
                  <el-tabs v-model="activeTab" @tab-change="tabChange">
                     <el-tab-pane label="论坛推荐" name="recommend">
                        <Recommend />
                     </el-tab-pane>
                     <el-tab-pane label="最新更新" name="nearestTime">
                        <Nearest />
                     </el-tab-pane>
                  </el-tabs>
               </div>
            </div>
            <div class="MainLeftRight w26">
               <!-- 热门帖子 -->
                <HotPost />
            </div>
         </div>
      </div>
   </div>
</template>

<script setup name="RecommendForm">
import { otherApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, onBeforeUnmount } from 'vue';
import { useRouter,onBeforeRouteLeave } from 'vue-router';
import HotPost from '@/components/HotPost.vue'; // 热门帖子
import Recommend from '@/components/Recommend.vue'; // 论坛推荐
import Nearest from '@/components/Nearest.vue'; // 最新更新

/**
 * @name DATA
 */
const activeTab = ref('recommend');
const loading = ref(false);

/**
 * @name 生命周期
 */
onBeforeMount(() => {
   let recommendActiveTab = sessionStorage.getItem('recommendActiveTab');
   if(activeTab){
      activeTab.value = recommendActiveTab;
   }
   getCarouselImages();
})

/**
 * @name 切换tab
 */
const tabChange = (activeName) => {
   if(activeName == 'recommend'){
        sessionStorage.setItem('recommendActiveTab', 'recommend');
   }else{
        sessionStorage.setItem('recommendActiveTab', 'nearestTime');
   }
}

/**
 * @name 轮播图
 */
const carouselImages = ref([]);
const getCarouselImages = () => {
   loading.value = true;
   otherApi.getCarouselImages().then((res) => {
      carouselImages.value = res.result;
   }).catch((err) => { }).finally(() => {
      loading.value = false;
   })
}


</script>

<style lang="less" scoped>
:deep(.el-carousel__container) {
   height: 355px;
}
:deep(.el-tabs__item){
   font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}
:deep(.el-tabs__item.is-active){
    color: #333;
}
:deep(.el-tabs__active-bar){
   background-color: #00753e;
}
</style>